<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        Vue指令 v-modle
        1.作用：给表单元素使用，双向数据绑定 => 可以快速获取或设置表单元素内容
            数据变化 => 视图自动更新
            视图变化 => 数据自动更新
            可以快速[获取]或[设置]表单元素的内容
        2.语法:v-model="变量"

    -->
        <div id="app">
            账户：<input type="text" v-model="user"><br><br>
            密码：<input type="password" v-model="pass"><br><br>
            <button @click="login">登录</button>
            <button @click="reset">重置</button>
        </div> 

        <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
        <script>
            const app=new Vue({
                el:"#app",
                data:{
                    user:"",
                    pass:""

                },
                methods:{
                    login(){
                        
                    },
                    reset(){
                        this.user=""
                        this.pass=""
                    }
                    
                }

            })
        </script>

</body> 
</html>